<script setup lang="ts">
import { fetchSingleTestRecords, type LogDataRecord } from '@/api/admin/historyRecord'

const router = useRouter()

const form = ref({
  start_date: '',
  end_date: '',
  status: '',
  sort_by: '',
  sort_order: '',
})

const listData = ref<Array<LogDataRecord>>([])

const pagination = ref({
  currentPage: 1,
  total: 0,
  pageSize: 50,
})

const query = (useRoute().query || {
  medical_record_number: '',
}) as {
  medical_record_number: string
}

const loading = ref(false)

const fetchListData = async () => {
  try {
    loading.value = true
    const response = await fetchSingleTestRecords({
      ...form.value,
      page: pagination.value.currentPage,
      size: pagination.value.pageSize,
      medical_record_number: query.medical_record_number,
      start_date: form.value.start_date || void 0,
      end_date: form.value.end_date || void 0,
      sort_by: form.value.sort_by || void 0,
      sort_order: form.value.sort_order || void 0,
    })
    if (response) {
      listData.value = response.items || []
      pagination.value.total = response.total_items || 0
    } else {
      listData.value = []
      pagination.value.total = 0
      pagination.value.currentPage = 1
    }
  } catch (error: any) {
    ElMessage.error(error?.errorDetails.description || error?.message || '未知错误')
  } finally {
    loading.value = false
  }
}

const handleCurrentChange = (page: number) => {
  pagination.value.currentPage = page
  fetchListData()
}

const handleReset = () => {
  form.value = {
    start_date: '',
    end_date: '',
    status: '',
    sort_by: '',
    sort_order: '',
  }
}

const handleRowClick = (row: LogDataRecord) => {
  router.push({
    path: '/gait',
    query: {
      medical_record_number: row.medical_record_number,
      created_date: row.created_date,
    },
  })
}

const handlePreviousPage = () => {
  router.push('/historyRecord')
}

onMounted(() => {
  fetchListData()
})
</script>

<template>
  <div class="h-full flex flex-col">
    <el-form :model="form" label-width="70">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.start_date"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="开始时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.end_date"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="结束时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="全部" value="" />
              <el-option label="completed" value="completed" />
              <el-option label="initialized" value="initialized" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" class="mr-2" @click="handleCurrentChange(1)">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      border
      v-loading="loading"
      :data="listData"
      header-row-class-name="table-brand-header"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" label="序号" width="100" show-overflow-tooltip />
      <el-table-column prop="medical_record_number" label="就诊号" show-overflow-tooltip />
      <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" show-overflow-tooltip />
    </el-table>
    <div class="flex justify-between mt-4">
      <div class="flex items-center">
        <ivs-pagination v-bind="pagination" @current-change="handleCurrentChange" />
        <el-button type="primary" class="ml-2">跳转</el-button>
      </div>
      <el-button type="primary" @click="handlePreviousPage">返回上一页</el-button>
    </div>
  </div>
</template>
